<html>

<head>
    <meta charset="UTF-8">
    <title>TopTip-顶部提示</title>
    <link rel="stylesheet" href="content/bootstrap.css">
    <style>
        .top-tip {
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            z-index: 1000;
            display: none;
        }
        
        .top-box {
            background-color: #F60;
            position: relative;
            min-height: 30px;
            line-height: 20px;
            width: 200px;
            margin: 0px auto;
            text-align: center;
            padding: 5px 5px;
        }
        
        .top-box .msg {
            color: #fff;
        }
        
        .show{
            margin-top: 50px;
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <div class="top-tip">
        <div class="top-box">
            <div class="msg"></div>
        </div>
    </div>

    <input id="show" class="btn btn-primary show" type="button" value="显示" />
    <script src="Scripts/jquery-2.2.3.js"></script>
    <script>
        $(function(){
            $("#show").click(function(){
                ShowTopTip('我就得瑟一下。');
            }); 
        });
         function ShowTopTip(msg) {
            $(".top-tip .msg").text(msg);
            $(".top-tip").show(500).delay(2000).hide(500);
        }
    </script>
</body>

</html>